<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>

</head>
<style>
</style>

<body>


<el-container id="app">
    <el-main>
        <el-form :inline="true" :model="formSearch" class="demo-form-inline"
                 style="position: relative;top: 10px;text-align: center;">

            <el-form-item label="商品类型">
                <el-select v-model="formSearch.typeIdKeyword" placeholder="商品类型">
                    <el-option value="0" label="商品类型"></el-option>
                    <el-option v-for="productType in productTypes" :value="productType.id"
                               :label="productType.typeName"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商品信息">
                <el-input v-model="formSearch.keyword" placeholder="请输入商品信息"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>


        <div v-if="productList.length < 1">
            <h2 style="text-align: center">
                搜索不到需求商品，回到<a href="/productmain.html">首页</a>
            </h2>
        </div>

        <el-row>
            <el-col :span="7" v-for="(product, index) in productList" :offset="index % 3 == 0 ? 0 : 1"
                    style="margin-top: 10px">
                <el-card style="height:220px;cursor:pointer;" :body-style="{ padding: '20px' }" @click.native="toDetail(product.id)">
                    <div>
                        <img width="180px" height="180px"
                             :src="product.productImg"
                             class="image">
                    </div>
                    <div style="margin-top: -180px;margin-left: 190px;">
                        <div style="font-family: 'PingFang SC';">
                            <div style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"><b>产品：</b><span
                                    v-text="product.productName"></span></div>
                            <div style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"><b>店铺：</b><span
                                    v-text="product.storeName"></span></div>
                            <div style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"><b>类型：</b><span
                                    v-if="product.typeName.length>=1" v-for="(type,index) in product.typeName"
                                    v-text="(index>0?'、'+type:type)"></span><span
                                    v-if="product.typeName.length<1">无</span>
                            </div>
                            <div><b>单价：</b><span v-text="product.productPrice"></span>元</div>
                            <div v-if="product.stockCount == 0" style="color: red"><b>库存：</b><span v-text="product.stockCount"></span>份</div>
                            <div v-if="product.stockCount != 0"><b>库存：</b><span v-text="product.stockCount"></span>份</div>
                            <div><b>销量：</b><span v-text="product.buyCount">销量</span>份</div>
                        </div>
                    </div>

                    <div style="margin-top: 10px;margin-left: 200px">
                        <el-tooltip class="item" effect="dark" content="进入店铺" placement="bottom-start">
                            <el-button type="success" icon="el-icon-s-shop" circle
                                       @click.stop="toStoreMenu(product.storeId)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="加入购物车" placement="bottom-start">
                            <el-button style="margin-left: 30px" type="warning" icon="el-icon-shopping-cart-full" circle
                                       @click.stop="addToCart(product.id)"></el-button>
                        </el-tooltip>


                    </div>

                </el-card>
            </el-col>
        </el-row>

        <div class="block" style="width:95%;text-align: center;position:absolute;top:560px">
            <el-pagination
                    @current-change="refreshProductList"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="totalPage">
            </el-pagination>
        </div>

    </el-main>


</el-container>

<script>


    console.log(".........storemenu...........")

    let storemenu = new Vue({
        el: "#app"
        ,
        data: {
            formSearch: {
                keyword: '',
                typeIdKeyword: ''
            },
            productTypes: [],

            //分页
            currentPage: 1,
            pageSize: 6,
            totalPage: 0,
            //数据
            productList: [],

            //为其他页面备用
            // storeId:0,
        }
        ,
        methods: {
            onSubmit() {
                this.refreshProductList();
            }
            ,
            onReset() {
                this.formSearch.keyword = '';
                this.formSearch.typeIdKeyword = '';
                this.refreshProductList();
            }
            ,
            initProductTypes() {
                let _this = this;
                $.post("/productType/allStore", this.formSearch, function (data) {
                    console.log(data);
                    _this.productTypes = data;
                })
            }
            ,
            refreshProductList() {
                let _this = this;
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.formSearch.keyword,
                    typeIdKeyword: this.formSearch.typeIdKeyword,
                    //为其他页面备用
                    //storeId: this.storeId,
                };
                $.post("/product/select", params, function (data) {
                    console.log(data);
                    _this.productList = data.records;
                    _this.totalPage = data.total;
                    console.log(_this.productList);
                })
            }
            ,
            addToCart(productId) {
                let _this = this;
                $.get("/cart/add?productId="+productId,function (data){
                    _this.$alert(data);
                })
            }
            ,
            toStoreMenu(storeId) {
                location.href = "/store/toStoreMenu?storeId="+storeId;
            },
            toDetail(productId){
                console.log(productId);
                window.location.href="/product/toProductDetail?productId="+productId
            }

        }
        ,
        created() {
            this.initProductTypes();
            this.refreshProductList();

        }

    });


</script>


</body>
</html>
